<template>
    <div class="app-container">
        <div style="text-align: right;padding-bottom: 10px">
            <el-button type="primary" @click="$router.push('/iot/device/create')">添加</el-button>
        </div>
        <el-table :key="tableKey" v-loading="listLoading" :data="device_list" border fit highlight-current-row style="width: 100%">
            <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
                <template slot-scope="{ row }">
                    <span>{{ row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="名称" prop="name" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.name ? row.name : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="标识" prop="identity" align="center" width="150">
                <template slot-scope="{ row }">
                    <span>{{ row.identity ? row.identity : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
                <template slot-scope="{ row, $index }">
                    <el-button size="mini" type="primary" @click="handleConf(row, $index)">
                        导出配置
                    </el-button>
                    <el-button size="mini" type="primary" @click="handleUpdate(row, $index)">
                        {{ $t("table.edit") }}
                    </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        {{ $t("table.delete") }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    </div>
</template>

<script>
import { list, deleteDevice } from '@/iot/api/device/device'
import { get as getGateway } from '@/iot/api/gateway/gateway'

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
    components: { Pagination },
    data() {
        return {
            device_list: [],
            total: 0,
            tableKey: 0,
            listLoading: false,
            listQuery: {
                page: 1,
                limit: 20,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: "+id",
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 参数是json文件要保存的内容
        downloadJson(file_name = "jsonFileName.json", json_str) {
            // JSON文件里面的内容
            var content = JSON.stringify(json_str);
            // 创建一个a链接dom
            var dom_a = document.createElement('a');
            // 设置保存的json文件名称
            dom_a.download = file_name;
            // 设置文件保存的内容
            dom_a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content);
            // 添加a链接dom
            document.body.appendChild(dom_a);
            // 点击触发a链接
            dom_a.click();
            // 删除a链接dom
            document.body.removeChild(dom_a);
        },
        handleConf(row, index) {
            getGateway({
                id: row.gateway_id
            }).then(res => {
                const gateway = res.data
                this.downloadJson("lock.json", {
                    identity: row.identity,
                    gateway: {
                        ip: gateway.ip
                    }
                })
            })
        },
        getList() {
            this.listLoading = true
            list().then(res => {
                this.listLoading = false
                this.device_list = res.data.items
                this.total = res.data.total
            })
        },
        handleUpdate(row, index) {
            this.$router.push('/iot/device/edit?id=' + row.id)
        },
        handleDelete(row, index) {
            this.$alert('确认删除设备！', {
                confirmButtonText: '确定',
                callback: action => {
                    if (action == 'confirm') {
                        deleteDevice({
                            id: row.id
                        }).then(res => {
                            this.getList()
                        })
                    }
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">
</style>